<template>
	<div class="container-fluid">
		<el-row :gutter="20">
			<el-col :span="24" :xs="24" :sm="24" :lg="6">
				<div class="grid-content bg-purple">
					<div class="panel">
						<div class="panel-heading">
							<el-row>
								<el-col :span="8">
									<div class="grid-content bg-purple">
										<h3 class="panel-title">分类列表</h3>
									</div>
								</el-col>
								<el-col :span="16">
									<div class="grid-content bg-purple pull-right">
										<el-button-group>
											<el-button size="mini" icon="el-icon-plus" plain @click="createCategory"></el-button>
											<el-button size="mini" icon="el-icon-edit-outline" :disabled="!selectNode" plain @click="editCategory"></el-button>
											<el-button size="mini" icon="el-icon-delete" :disabled="!selectNode" plain @click="deleteCategory"></el-button>
										</el-button-group>
									</div>
								</el-col>
							</el-row>
						</div>
						<div class="panel-body">
							<el-table ref="singleTable" :data="categories" highlight-current-row style="width: 100%" @row-click="fenLeiClick" @current-change="handleCurrentChangeFenLei">
								<el-table-column prop="bh" label="编号"></el-table-column>
							    <el-table-column prop="name" label="名称"></el-table-column>
									<el-table-column label="绑定数">
										<template slot-scope="scope">{{ scope.row.name === '全部' ? total : scope.row.shops.length }}</template>
									</el-table-column>
							  </el-table>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="24" :xs="24" :sm="24" :lg="18">
				<div class="grid-content bg-purple">
					<div class="panel">
						<div class="panel-heading">
							<el-row class="heading-row">
								<el-col :span="2">
									<div class="grid-content bg-purple">
										<el-button type="primary" plain @click="createShop" icon="el-icon-plus">组织</el-button>
									</div>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<collapse-view content="高级搜索">
										<el-form :model="queryParams" label-width="40px" label-position="right" :inline="true" ref="searchForm">
											<el-form-item label="名称">
												<el-input v-model="queryParams.name" placeholder="输入组织名称查询" clearable></el-input>
											</el-form-item>
											<el-form-item label="编码">
												<el-input v-model="queryParams.code" placeholder="输入组织编码查询" clearable></el-input>
											</el-form-item>
											<el-form-item>
												<el-button @click="fetchShops">搜索</el-button>
												<el-button @click="clearSearchForm">清除</el-button>
											</el-form-item>
										</el-form>
									</collapse-view>
								</el-col>
							</el-row>
							<el-dialog title="添加组织信息" :visible.sync="create" width="30%" :before-close="handleCreateClose">
								<el-form :model="createParams" label-width="80px" label-position="right" :rules="createRules" ref="createForm">
									<el-form-item label="组织名称" prop="name">
										<el-input v-model="createParams.name" :autofocus="true" placeholder="请输入组织名称" clearable></el-input>
									</el-form-item>
									<el-form-item label="组织编码" prop="code">
										<el-input v-model="createParams.code" auto-complete="off" placeholder="请输入组织编码" clearable></el-input>
									</el-form-item>
									<collapse-view>
										<el-form-item label="组织地址" prop="address">
											<el-input v-model="createParams.address" auto-complete="off" placeholder="请输入组织地址" clearable></el-input>
										</el-form-item>
										<el-form-item label="组织座机" prop="telephone">
											<el-input v-model="createParams.telephone" auto-complete="off" placeholder="请输入组织座机" clearable></el-input>
										</el-form-item>
										<el-form-item label="联系人" prop="contacts">
											<el-input v-model="createParams.contacts" auto-complete="off" placeholder="请输入组织联系人" clearable></el-input>
										</el-form-item>
										<el-form-item label="联系方式" prop="mobile">
											<el-input v-model="createParams.mobile" auto-complete="off" placeholder="输入联系人电话" clearable></el-input>
										</el-form-item>
									</collapse-view>
								</el-form>
								<div slot="footer" class="dialog-footer">
									<el-button @click="create = false">取 消</el-button>
									<el-button type="primary" @click="submitCreateForm('createForm')">确 定</el-button>
								</div>
							</el-dialog>
						</div>
						<div class="panel-body">
							<el-table :data="collections.data" style="width: 100%" v-loading="loading" @row-dblclick="tableDblclick">
								<el-table-column label="编码" prop="code" width="150"></el-table-column>
								<el-table-column label="名称" prop="name" width="150"></el-table-column>
								<el-table-column label="位置" prop="address"></el-table-column>
								<el-table-column label="已绑任务" prop="tasks.length" width="100"></el-table-column>
								<el-table-column label="已绑人员" prop="users.length" width="100"></el-table-column>
								<el-table-column label="操作" width="400">
									<template slot-scope="scope">
										<el-button size="mini" @click="handleAddTask(scope.$index, scope.row)" icon="el-icon-edit-outline">任务</el-button>
										<el-button size="mini" @click="handleAttachMember(scope.$index, scope.row)" icon="el-icon-edit-outline">人员</el-button>
										<el-button size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit-outline"></el-button>
										<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" plain icon="el-icon-close"></el-button>
									</template>
								</el-table-column>
							</el-table>
							<el-dialog title="编辑组织信息" :visible.sync="edit" width="30%" :before-close="handleEditClose">
								<el-form :model="editParams" label-width="80px" label-position="right" :rules="createRules" ref="editForm">
									<el-form-item label="组织名称" prop="name">
										<el-input v-model="editParams.name" auto-complete="off" placeholder="请输入组织名称"></el-input>
									</el-form-item>
									<el-form-item label="组织编码" prop="code">
										<el-input v-model="editParams.code" auto-complete="off" placeholder="请输入组织编码"></el-input>
									</el-form-item>
									<el-form-item label="组织分类">
										<el-select v-model="editParams.category_id" placeholder="请选择组织分类">
											<el-option v-for="item in categories_add_edit" :key="item.id" :label="item.name" :value="item.id"></el-option>
										</el-select>
									</el-form-item>
									<collapse-view>
										<el-form-item label="组织地址" prop="address">
											<el-input v-model="editParams.address" auto-complete="off" placeholder="请输入组织地址"></el-input>
										</el-form-item>
										<el-form-item label="组织座机" prop="telephone">
											<el-input v-model="editParams.telephone" auto-complete="off" placeholder="请输入组织座机"></el-input>
										</el-form-item>
										<el-form-item label="联系人" prop="contacts">
											<el-input v-model="editParams.contacts" auto-complete="off" placeholder="请输入组织联系人"></el-input>
										</el-form-item>
										<el-form-item label="联系方式" prop="mobile">
											<el-input v-model="editParams.mobile" auto-complete="off" placeholder="输入联系人电话"></el-input>
										</el-form-item>
									</collapse-view>
								</el-form>
								<div slot="footer" class="dialog-footer">
									<el-button @click="edit = false">取 消</el-button>
									<el-button type="primary" @click="submitEditForm('editForm')">确 定</el-button>
								</div>
							</el-dialog>
							<!-- 编辑任务 -->
							<el-dialog title="编辑任务" :visible.sync="attachAddTaskMember" width="100%" :before-close="handleAddTaskClose">
								<el-row>
									<el-col :span="24">
										<collapse-view content="高级搜索">
											<el-form label-width="70px" label-position="right" :inline="true">
												<el-form-item label="任务分类">
													<el-select v-model="taskParams.category_id" placeholder="选择任务分类查询" clearable>
														<el-option v-for="item in taskCategories" :key="item.id" :label="item.name" :value="item.id"></el-option>
													</el-select>
												</el-form-item>
												<el-form-item>
													<el-button @click="fetchAllTasks">搜索</el-button>
												</el-form-item>
											</el-form>
										</collapse-view>
									</el-col>
								</el-row>
								<el-transfer v-model="shop.tasks" filterable :titles="TaskTitles" :button-texts="['移除任务', '添加任务']" :format="format" :props="Props" :data="tasks"></el-transfer>
								<div slot="footer" class="dialog-footer">
									<el-button @click="attachAddTaskMember = false">取 消</el-button>
									<el-button type="primary" @click="submitTasks">确 定</el-button>
								</div>
							</el-dialog>

							<!-- 添加人员 -->
							<el-dialog title="添加人员" :visible.sync="attachMember" width="100%" :before-close="handleAddUserClose">
								<el-transfer v-model="shop.members" filterable :titles="titles" :button-texts="['移除人员', '添加人员']" :format="format" :props="Props" :data="users"></el-transfer>
								<div slot="footer" class="dialog-footer">
									<el-button @click="attachMember = false">取 消</el-button>
									<el-button type="primary" @click="submitMembers">确 定</el-button>
								</div>
							</el-dialog>
						</div>
						<div class="panel-footer text-right">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
														 :current-page="queryParams.page"
														 :page-sizes="[10, 20, 50, 100]"
														 :page-size="queryParams.paginate"
														 layout="total, sizes, prev, pager, next, jumper"
														 :total="collections.total">
							</el-pagination>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>

		<!-- 创建组织分类 -->
		<el-dialog title="创建组织分类" :visible.sync="createShopCategoryDialog" width="400px" @close="handleCreateShopCategoryFormClose">
			<el-form ref="createCategoryForm" :model="createShopCategoryParams" :rules="createShopCategoryRules">
				<el-form-item label="分类名称" label-width="80px" prop="name">
					<el-input v-model="createShopCategoryParams.name" :autofocus="true"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="createShopCategoryDialog = false">取 消</el-button>
				<el-button type="primary" @click="submitCreateShopCategory">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 编辑组织分类 -->
		<el-dialog title="编辑组织分类" :visible.sync="editShopCategoryDialog" width="400px" @close="handleEditShopCategoryFormClose">
			<el-form ref="editCategoryForm" :model="editShopCategoryParams" :rules="editShopCategoryRules">
				<el-form-item label="分类名称" label-width="80px" prop="name">
					<el-input v-model="editShopCategoryParams.name" :autofocus="true"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editShopCategoryDialog = false">取 消</el-button>
				<el-button type="primary" @click="submitEditShopCategory">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 添加组织信息 -->
		<el-dialog title="添加组织信息" :visible.sync="create" width="30%" :before-close="handleCreateClose">
			<el-form :model="createParams" label-width="80px" label-position="right" :rules="createRules" ref="createForm">
				<el-form-item label="组织名称" prop="name">
					<el-input v-model="createParams.name" :autofocus="true" placeholder="请输入组织名称" clearable></el-input>
				</el-form-item>
				<el-form-item label="组织编码" prop="code">
					<el-input v-model="createParams.code" auto-complete="off" placeholder="请输入组织编码" clearable></el-input>
				</el-form-item>
				<el-form-item label="组织分类">
					<el-select v-model="createParams.category_id" placeholder="请选择组织分类">
						<el-option v-for="item in categories_add_edit" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<collapse-view>
					<el-form-item label="组织地址" prop="address">
						<el-input v-model="createParams.address" auto-complete="off" placeholder="请输入组织地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="组织座机" prop="telephone">
						<el-input v-model="createParams.telephone" auto-complete="off" placeholder="请输入组织座机" clearable></el-input>
					</el-form-item>
					<el-form-item label="联系人" prop="contacts">
						<el-input v-model="createParams.contacts" auto-complete="off" placeholder="请输入组织联系人" clearable></el-input>
					</el-form-item>
					<el-form-item label="联系方式" prop="mobile">
						<el-input v-model="createParams.mobile" auto-complete="off" placeholder="输入联系人电话" clearable></el-input>
					</el-form-item>
				</collapse-view>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="create = false">取 消</el-button>
				<el-button type="primary" @click="submitCreateForm('createForm')">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 组织任务列表显示 -->
		<el-dialog title="组织任务" :visible.sync="ZhuZhiRenWuDialog" width="900px" @close="ZhuZhiRenWuDialogClose">
			<el-table :data="ZhuZhiRenWuData" style="width: 100%" v-loading="loading">
				<el-table-column label="名称" prop="name"></el-table-column>
				<el-table-column label="有效期">
					<template slot-scope="scope" v-if="scope.row.start_time != '' && scope.row.start_time != null ">{{ scope.row.start_time }} ~ {{ scope.row.end_time }}</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="created_at"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	import api from '../apis'
	import Vue from 'vue';

	export default {
		name: "shop",
		data () {
			return {
				loading: false,
				create: false,
				edit: false,
				createShopCategoryDialog: false,
				editShopCategoryDialog: false,
				// 组织任务开始
				ZhuZhiRenWuDialog: false,
				ZhuZhiRenWuData:[],
				// 组织任务结束
				attachMember: false,
				total: 0,
				createRules: {
					name: [
						{ required: true, message: '请输入组织名称', trigger: 'blur' }
					],
					code: [
						{ required: true, message: '请输入组织编码', trigger: 'blur' }
					],
					category_id: [
						{ required: false, message: '请选择组织类型', trigger: 'change' }
					]
				},
				createShopCategoryParams: {
					name: '',
					scope: 'shop'
				},
				createShopCategoryRules: {
					name: [
						{ required: true, message: '请输分类名称', trigger: 'blur' }
					]
				},
				editShopCategoryParams: {
					name: '',
				},
				editShopCategoryRules: {
					name: [
						{ required: true, message: '请输分类名称', trigger: 'blur' }
					]
				},

				selectNode: null,
				createParams: {
					name: '',
					code: '',
					category_id: '',
					address: '',
					telephone: '',
					contacts: '',
					mobile: '',
				},
				editParams: {
					name: '',
					code: '',
					category_id: '',
					address: '',
					telephone: '',
					contacts: '',
					mobile: ''
				},
				categories: [],
				categories_add_edit: [],
				collections: {
					data: [],
					total: 0,
				},
				queryParams: {
					page: 1,
					paginate: 10,
					name: '',
					code: '',
					address: '',
					contacts: '',
					category_id: null
				},
				props: {
					children: 'children',
					label: 'name',
					label1: 'id',
				},
				shop: {
					members: [],
					tasks: [],
				},
				titles: ['人员'],
				// 所有人员
				users: [],
				format: {
					noChecked: '${total}',
					hasChecked: '${checked}/${total}'
				},
				Props: {
					key: 'id',
					label: 'name'
				},
				shopId: null,

				// 添加任务-开始
				attachAddTaskMember: false,
				TaskTitles: ['任务'],
				tasks: [],
				taskParams: {
					is_page: 1,
					category_id: null,
				},
				shopTaskParams: {
					shop_id: 0,
					is_return_id: 1,
				},
				taskCategories: [],
				currentRow:0
			}
		},
		methods: {
			/**
			 * 商店分类点击重新查询
			 */
			fenLeiClick (row, event, column) {
				this.queryParams.category_id = row.id;
				// console.log(row);
				if(row.id != ""){
					this.selectNode = row;
				}else{
					this.selectNode = null;
				}
				// 请求门店信息
				this.fetchShops();
			},
			/**
			 * 商店分类默认选中第几行
			 */
			setCurrent(row) {
		        this.$refs.singleTable.setCurrentRow(row);
		    },
		    handleCurrentChangeFenLei(val){
		    	this.currentRow = val;
		    },
			/**
			 * 分类信息的请求
			 */
			fetchCategories () {
				api.category.fetch(
					{
						scope: 'shop'
					}
				).then(response => {
					this.categories_add_edit = response.data;
					this.categories = this.dataAddQuanBu(response.data);
					this.setCurrent(this.categories[0]);
				}).catch(errors => {});
			},
			fetchTaskCategories () {
				api.category.fetch(
					{
						scope: 'task'
					}
				).then(response => {
					this.taskCategories = this.dataAddQuanBu(response.data);
				}).catch(errors => {});
			},
			/**
			 * 给数组拼接全部
			 */
			dataAddQuanBu (data) {
				let dataq = {
					bh: 1,
					id: "",
					name: "全部",
					shops: this.collections.data
				};

				let dataqs = [];
				dataqs.push(dataq);

				for(let i = 0;i<data.length;i++){
					let dataq = {
						bh: i+2,
						id: data[i].id,
						name: data[i].name,
						shops: data[i].shops
					};
					dataqs.push(dataq)
				}
				return dataqs;
			},
			/**
			 * 行双击事件
			 */
			tableDblclick (row, event) {
				this.ZhuZhiRenWuDialog = true;
				this.ZhuZhiRenWuData = row.tasks;
				console.log(row);
			},
			/**
			 * 获取组织数据集合
			 */
			fetchShops () {
				this.loading = true;
				// 等于全部就等于空
				api.shop.fetch(this.queryParams).then(response => {
					if(!this.queryParams.category_id) {
						this.total = response.data.total;
					}
					this.collections = response.data;
					this.dataAddQuanBu(response.data);
					this.loading = false;
				})
			},
			/**
			 * 获取用户信息
			 */
			fetchAllUsers () {
				api.user.fetchAllUsers().then(response => {
					this.users = response.data;
				}).catch(errors => {
					this.$message.error(errors.response.data.error);
				})
			},
			/**
			 * 根据组织ID 获取人员信息
			 */
			fetchUsersByShop (id) {
				api.shop.fetchByID(id, {
					relation: true,
					only_id: true
				}).then(response => {
					this.shop.members = response.data;
				})
			},
			createCategory () {
				this.createShopCategoryDialog = true;
			},
			/**
			 * 提交创建的分类表单信息
			 */
			submitCreateShopCategory () {
				api.category.store(this.createShopCategoryParams).then(response => {
					this.$message.success('创建成功');
					this.handleCreateShopCategoryFormClose();
					this.fetchCategories();
				}).catch(errors => {
					this.$message.error(errors.response.data.error);
				})
			},
			/**
			 * 提交修改后的分类信息
			 */
			submitEditShopCategory () {
				api.category.update(this.selectNode.id, this.editShopCategoryParams).then(response => {
					this.selectNode.name = response.data.name;
					this.$message.success('更新成功');
					this.handleEditShopCategoryFormClose();
				}).catch(errors => {
					this.$message.error(errors.response.data.error);
				});
			},
			handleCreateShopCategoryFormClose () {
				this.createShopCategoryDialog = false;
				this.$refs['createCategoryForm'].resetFields();
			},
			handleEditShopCategoryFormClose () {
				this.editShopCategoryDialog = false;
				this.$refs['editCategoryForm'].resetFields();
			},
			/**
			 * 分类列表点击事件
			 */
			selectNodeHandle (item) {
				this.selectNode = item;
				this.queryParams.category_id = item.id;
				this.fetchShops();
			},
			/**
			 * 修改组织分类名称
			 */
			editCategory () {
				this.editShopCategoryDialog = true;
				this.editShopCategoryParams.name = this.selectNode.name
			},
			/**
			 * 删除组织分类名称
			 */
			deleteCategory () {
				if(this.selectNode.name != "全部"){
					api.category.destroy(this.selectNode.id).then(() => {
						this.selectNode = null;
						this.fetchCategories();
						this.$message.success('删除成功');
					}).catch(errors => {
						this.$message.error(errors.response.data.error);
					})
				}else{
					this.$message({
			          message: '全部不可删除',
			          type: 'warning'
			        });
				}
			},
			/**
			 * 显示编辑表单
			 */
			handleEdit (index, row) {
				this.edit = true;
				this.editParams = row;
			},
			/**
			 * 点击添加人员按钮触发
			 */
			handleAttachMember (index, row) {
				//设置穿梭框的组织名称
				this.titles[1] = row.name;
				this.fetchUsersByShop(row.id);
				this.fetchAllUsers();
				this.attachMember = true;
				this.shopId = row.id;
			},
			/**
			 * 提交关联组织人员
			 */
			submitMembers () {
				api.shop.syncMembers(this.shopId, this.shop).then(response => {
					this.shop.members = response.data;
					this.$message.success('保存成功');
					//隐藏关联窗口
					this.attachMember = false;
				});
			},
			/**
			 * 获取任务分类信息
			 */
			fetchAllTasks () {
				// 等于全部就等于空
				api.task.fetch(this.taskParams).then(response => {
					this.tasks = response.data;
				}).catch(errors => {
					this.$message.error(errors.response.data.error);
				})
			},
			/**
			 * 获取组织任务信息
			 */
			fetchAllShopTasks () {
				api.shop.fetch(this.shopTaskParams).then(response => {
					this.shop.tasks = response.data;
				}).catch(errors => {
					this.$message.error(errors.response.data.error);
				})
			},
			/**
			 * 点击添加参数按钮触发
			 */
			handleAddTask (index, row) {
				this.fetchTaskCategories();
				// 设置穿梭框的组织名称
				this.TaskTitles[1] = row.name;
				// 搜索组织
				this.shopTaskParams.shop_id = row.id;
				// 获取任务信息
				this.fetchAllTasks();
				// 获取组织任务信息
				this.fetchAllShopTasks();
				// 显示弹窗
				this.attachAddTaskMember = true;
				// 当前组织id
				this.shopId = row.id;
			},
			/**
			 * 提交管理组织关联任务
			 */
			submitTasks () {
				api.shop.syncTasks(this.shopId, this.shop).then(response => {
					this.shop.tasks = response.data;
					this.$message.success('保存成功');
					//隐藏关联窗口
					this.attachAddTaskMember = false;
				});
			},
			/**
			 * 处理删除信息
			 */
			handleDelete (index, row) {
				this.$confirm('此操作将删除组织信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					api.shop.destroy(row.id).then(() => {
						Vue.delete(this.collections.data, index);
						this.$message.success('删除成功');
						this.fetchCategories();
					}).catch(errors => {
						this.$message.error(errors.response.data.error);
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			/**
			 * 当改变分页大小时重新获取组织数据
			 */
			handleSizeChange (size) {
				this.queryParams.paginate = size;
				this.fetchShops();
			},
			/**
			 * 当改变页码时重新获取组织数据
			 */
			handleCurrentChange (index) {
				this.queryParams.page = index;
				this.fetchShops();
			},
			/**
			 * 显示创建组织表单
			 */
			createShop () {
				this.create = true;
			},
			/**
			 * 创建组织信息
			 */
			submitCreateForm (name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						api.shop.store(this.createParams).then(response => {
							/**
							 * 将创建的门店信息添加到分类中
							 */
							this.categories.forEach(item => {
								if(item.id === response.data.category_id) {
									item.shops.push(response.data);
								}
							});
							this.total += 1;
							// 添加创建的数据到本地暂存中
							this.collections.data.push(response.data);
							this.collections.total += 1;
							this.$message.success('创建成功');
							this.jumpToLastPage();
							this.handleCreateClose();
							this.create = false;
						}).catch((errors) => {
							this.$message.error(errors.response.data.error);
						})
					} else {
						return false;
					}
				});
			},
			/**
			 * 跳转到最后一页
			 */
			jumpToLastPage () {
				let last = Math.ceil(this.collections.total / this.queryParams.paginate);
				if (this.queryParams.page < last) {
					this.queryParams.page = last;
				}
			},
			/**
			 * 提交编辑内容
			 */
			submitEditForm (name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						api.shop.update(this.editParams.id, this.editParams).then(response => {
							//添加创建的数据到本地暂存中
							this.$message.success('更新成功');
							this.fetchCategories();
							this.handleEditClose();
						})
					} else {
						return false;
					}
				});
			},
			/**
			 * 关闭添加参数
			 */
			handleAddTaskClose () {
				this.attachAddTaskMember = false;
			},
			/**
			 * 关闭创建表单时清空表单内容
			 */
			handleCreateClose () {
				this.create = false;
				Vue.set(this.createParams, 'category_id', '');
				this.$refs['createForm'].resetFields();
			},
			/**
			 * 状态关闭
			 */
			ZhuZhiRenWuDialogClose () {
				this.ZhuZhiRenWuDialog = false;
			},
			/**
			 * 关闭添加人员
			 */
			handleAddUserClose () {
				this.attachMember = false;
			},

			/**
			 * 关闭编辑表单时清空表单内容
			 */
			handleEditClose () {
				this.edit = false;
			},
			/**
			 * 清空搜索表单
			 */
			clearSearchForm () {
				this.queryParams.name = '';
				this.queryParams.code = '';
				this.queryParams.address = '';
				this.queryParams.contacts = '';
			}
		},
		mounted () {
			this.fetchShops();
			this.fetchCategories();
		}
	}
</script>

<style lang="scss">
	.el-select, .el-select--small {
		width: 100%;
	}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
 }
.el-transfer-panel{
	width: 43%;
}
</style>
